<!doctype html>
<html lang="en" class="dark font-sans antialiased">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/component.css" rel="stylesheet" />
    <script src="/component.js" defer></script>
  </head>
  <body class="flex justify-center p-6">
    <nav aria-label="Breadcrumb">
      <ol class="flex items-center gap-1 text-sm text-gray-700">
        <li>
          <a href="#" class="block transition-colors hover:text-gray-900"> Home </a>
        </li>

        <li class="rtl:rotate-180">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-4"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="m9 20.247 6-16.5" />
          </svg>
        </li>

        <li>
          <a href="#" class="block transition-colors hover:text-gray-900"> Category </a>
        </li>

        <li class="rtl:rotate-180">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-4"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="m9 20.247 6-16.5" />
          </svg>
        </li>

        <li>
          <a href="#" class="block transition-colors hover:text-gray-900"> Product </a>
        </li>
      </ol>
    </nav>
  </body>
</html>
